<template>
	<view>
		<view class="home-wrap u-m-b-20"
			:style="{ 'background':'linear-gradient( 180deg, #FE4F04 0%, #F6BF88 39%, #FFB7A3 65%, #F5F6FA 100%) no-repeat','background-size':'100% 45%'}">
			<landlord-navbar :isBack="false" :background="{ 'background':'transparent' }">
				<view slot="left" class="u-flex u-flex-around u-m-l-20 u-flex-items-center"
					style="color: #fff; text-align: center;padding:10rpx 20rpx;border:2rpx solid #fff;border-radius: 60rpx;height: 40rpx;margin-top: 30rpx;"
					@click="goBack()">
					<image class="u-m-r-6 qie-btn" src="/pages-landlord/static/images/qiehuan.png"></image>
					<view class="qie-title">{{"退出房东模式"}}</view>
				</view>
			</landlord-navbar>
			<view class="content-box u-p-10 u-m-l-20 u-m-r-20 u-m-t-30">
				<view class="u-content userinfo-box">
					<image src="/pages-landlord/static/mine/mine-bg.png" class="userinfo-bg"></image>
					<view class="u-flex u-flex-items-start">
						<view class="u-content-time" @click="showriqi=true">
							<view class="u-flex u-row-left">
								<image :src="user.avatar" class="avtar-url"></image>
							</view>
						</view>
						<view class="u-content-title">
							<view class="u-content-num">
								<view>{{ user.mobile }}</view>
							</view>
							<view class="u-content-tishi u-flex" v-if="userinfo&&userinfo.status==1"
								@click="previewQRCode(userinfo)">
								<view>已认证</view>
							</view>
							<view class="u-content-tishi u-flex" v-if="userinfo&&userinfo.status!=1">
								<view class="">{{userinfo.status_text}}</view>
								<u-icon name="arrow-right" color="#FE4F04" size="16" class="icon-eye"></u-icon>
							</view>
							<view class="u-content-tishi u-flex" v-if="!userinfo"
								@click="jump('/pages-landlord/authentication/identityAuthentication')">
								<view class="">您还未认证，请前往认证</view>
								<u-icon name="arrow-right" color="#FE4F04" size="16" class="icon-eye"></u-icon>
							</view>
						</view>
						<view class="monthIncome-box">
							<image src="/pages-landlord/static/mine/monthly-income.png" class="income-bg"></image>
							<view class="monthIncome">
								<view class="label">本月收入</view>
								<view class="value"> {{monthIncome}}</view>
							</view>
						</view>

					</view>
					<view class="u-content-nav">
						<!-- @click="jump('/pages-landlord/house/houseBill?id=' + 2)" -->
						<view class="u-flex u-flex-column u-flex-items-center"
							@click="$Tips('/pages-landlord/room-manage/room-manage?type=0')">
							<view class="u-content-nav-title">已出租</view>
							<view class="u-content-nav-money">{{statdata.rented}}</view>
						</view>
						<!-- @click="jump('/pages-landlord/house/houseBill?id=' + 3)" -->
						<view class="u-flex u-flex-column u-flex-items-center"
							@click="$Tips('/pages-landlord/room-manage/room-manage?type=1')">
							<view class="u-content-nav-title">发布中</view>
							<view class="u-content-nav-money">{{statdata.publish}}</view>

						</view>
						<!-- @click="jump('/pages-landlord/house/houseBill?id=' + 1)" -->
						<view class="u-flex u-flex-column u-flex-items-center"
							@click="$Tips('/pages-landlord/room-manage/room-manage?type=2')">
							<view class="u-content-nav-title">未出租</view>
							<view class="u-content-nav-money">{{statdata.not_rented}}</view>
						</view>
						<view class="u-flex u-flex-column u-flex-items-center"
							@click="$Tips('/pages-landlord/room-manage/room-manage')">
							<view class="u-content-nav-title">出租率</view>
							<view class="u-content-nav-money">{{statdata.rate}}</view>
						</view>
					</view>
				</view>
				<!--  热门消费-->
				<view class="u-flex u-flex-column u-p-20 u-m-t-30 yuangong-item u-flex-items-start">
					<view class="u-flex u-col-center u-row-left u-w-100s u-h-100 u-m-b-10">
						<view class="u-flex u-col-center u-row-between u-w-100s">
							<view class="u-flex u-row-left u-col-center u-w-70s">
								<view class="u-m-l-14" style="font-size: 32rpx;font-weight: bold">待办事项</view>
							</view>
						</view>
					</view>
					<view class="u-flex u-flex-around top-yuangong u-p-20" style="width: 94%;">
						<view class="u-flex u-flex-column u-flex-items-center u-flex-center u-flex-1"
							@click="toFather()">
							<image src="/pages-landlord/static/images/sz.png" class="tool-icon"></image>
							<view class="topname">收租提醒</view>
						</view>
						<view class="u-flex u-flex-column u-flex-items-center u-flex-center u-flex-1"
							@click="$Tips('/pages-landlord/house/receiptNew?status=2')">
							<image src="/pages-landlord/static/images/sk.png" class="tool-icon"></image>
							<view class="topname">待收款</view>
						</view>
						<view class="u-flex u-flex-column u-flex-items-center u-flex-center u-flex-1"
							@click="$Tips('/pages-landlord/contract/contractList')">
							<image src="/pages-landlord/static/images/ht.png" class="tool-icon"></image>
							<view class="topname">合同</view>
						</view>
						<view class="u-flex u-flex-column u-flex-items-center u-flex-center u-flex-1"
							@click="toSettings()">
							<image src="/pages-landlord/static/images/xt.png" class="tool-icon"></image>
							<view class="topname">系统设置</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-flex-column u-p-20 u-m-t-30 yuangong-item u-flex-items-start">
					<view class="u-flex u-col-center u-row-left u-w-100s u-h-100 u-m-b-10">
						<view class="u-flex u-col-center u-row-left u-w-100s">
							<view class="u-flex u-row-left u-col-center u-w-80s">
								<view class="u-m-l-14" style="font-size: 32rpx;font-weight: bold">工具箱</view>
							</view>
						</view>
					</view>
					<view class="u-flex u-flex-wrap top-yuangong u-p-t-20 u-p-b-20" style="width: 100%;">
						<view style="width: 25%;"
							class="u-flex u-flex-column u-flex-items-center u-flex-center top-yuangong-item u-m-b-26"
							v-for="(item,index) in toolList" :key="index" @click="roster(item)">
							<image :src="item.src" class="tool-icon"></image>
							<view class="topname"> {{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx ;"></view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	let chart = null
	import {
		landlordinfo,
		stat,
		getMonthIncome
	} from '@/api/landlord.js'
	export default {
		props: ['user'],
		data() {
			return {
				userinfo: null,
				monthIncome: 0,
				statdata: {
					not_rented: 0,
					publish: 0,
					rate: '0%',
					rented: 0
				},
				toolList: [
					// {
					// 	src: '/pages-landlord/static/mine/fangzu.png',
					// 	title: '房租签约',
					// 	path: `/pages-landlord/contract/agency`,
					// 	type: '1',
					// 	index: 1
					// },
					// {
					// 	src: '/pages-landlord/static/mine/shouzu.png',
					// 	title: '一键收租',
					// 	path: '/pages-landlord/rentcollection/rentcollection',
					// 	type: '2',
					// 	index: 2
					// },
					// {
					// 	src: '/pages-landlord/static/mine/heyue.png',
					// 	title: '我的合约',
					// 	path: '/pages-landlord/contract/contractList',
					// 	type: '3',
					// 	index: 3
					// },
					{
						src: '/pages-landlord/static/mine/caozuo.png',
						title: '操作指南',
						path: '/pages/mine/operateGuide',
						type: '4',
						index: 4
					},
					// {
					// 	src: '/pages-landlord/static/mine/shouju.png',
					// 	title: '账单收据',
					// 	path: '/pages-landlord/house/receipt',
					// 	type: '5',
					// 	index: 5
					// },
					{
						src: '/pages-landlord/static/mine/zhangdan.png',
						title: '账单',
						path: '/pages-landlord/house/receiptNew',
						type: '6',
						index: 6
					},
					{
						src: '/pages-landlord/static/mine/duanxin.png',
						title: '短信可用',
						path: '/pages-landlord/house/smsRecharge',
						type: '7',
						index: 7
					},
					{
						src: '/pages-landlord/static/mine/gonggao.png',
						title: '公告',
						path: '/pages-landlord/announcement/index',
						type: '8',
						index: 8
					},
					{
						src: '/pages-landlord/static/mine/yuangong.png',
						title: '员工列表',
						path: '/pages-landlord/employee/index',
						type: '9',
						index: 9
					},
					{
						src: '/pages-landlord/static/mine/fensi.png',
						title: '粉丝列表',
						path: '/pages-landlord/fans/index',
						type: '10',
						index: 10
					},
					{
						src: '/pages-landlord/static/mine/chaobiao.png',
						title: '抄表',
						path: '/pages-landlord/meter-reading/meter-reading',
						type: '11',
						index: 11
					},
					{
						src: '/pages-landlord/static/mine/tongji.png',
						title: '统计',
						path: '/pages-landlord/statistics/list',
						type: '12',
						index: 12
					}
				],
			};
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo']),

		},
		onPullDownRefresh() {

		},
		mounted() {
			// this.init()
			this.constinit()
			this.getMonthIncome()
		},
		onLoad(options) {
			// this.init()
			// console.log(8888);
			this.constinit()
		},
		methods: {
			getMonthIncome() {
				getMonthIncome().then(res => {
					this.monthIncome = res.data.data.money;
				})
			},
			previewQRCode(initfalsee) {
				console.log(e);

				if (e.status == 2) {
					this.jump('/pages-landlord/authentication/identityAuthentication?data=' + JSON.stringify(e))
				}

			},
			toFather() {
				// this.$emit('toFather', 1)
				this.$Toast('功能开发中')
			},
			toSettings() {
				this.jump('/pages-landlord/settings/index')
			},
			// 初始化
			init() {
				this.initdata()
			},
			constinit() {
				// 获取房顶认证信息
				landlordinfo({}).then(res => {
					this.userinfo = res.data.data;
					uni.setStorageSync('userinfo', res.data.data);
					// console.log(this.userinfo);
				})
				// 获取房东房源统计
				stat({}).then(res => {
					this.statdata = res.data.data;
					// console.log(res.data);
				})
			},
			denglu() {
				this.$store.dispatch("showAuthModal", "1233");
			},
			roster(e) {
				if (!e.path) {
					return this.$Toast('功能开发中')
				}
				if (e.type == 1) {
					this.jump(e.path + '?data=' + JSON.stringify(this.userinfo))
				} else {
					this.jump(e.path)
				}

			},
			// 路由跳转
			jump(item) {
				uni.navigateTo({
					url: item
				});
			},
			goBack() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.u-w-100s {
		width: 100%;
	}

	.uni-ec-canvas {
		width: 100%;
		height: 400rpx;
		display: block;
	}

	.uni-ec-canvas-bing {
		width: 100%;
		height: 200rpx;
		display: block;
	}

	.userinfo-box {
		position: relative;

		//background: linear-gradient(180deg, #FFE9D4 0%, #FFFFFF 20%);
		//border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
		.userinfo-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			object-fit: cover;
		}
	}

	page {
		background: #FFFFFF;
	}

	.qie-btn {
		width: 30rpx;
		height: 30rpx;
	}

	.qie-title {
		color: #fff;
		font-size: 28rpx;
	}

	.kehu-item {
		border-radius: 20rpx;
		width: 100%;

		.swipers {
			width: 100%;
		}
	}

	.topic {
		background: #F5F5F5;
		border-radius: 20rpx;

		.topic_left {
			width: 70rpx;
			height: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.topic_right {
			width: 96%;

			.title_right {
				.point {
					width: 10rpx;
					height: 10rpx;

					border-radius: 50%;
					background: #FA3E3E;
				}

				.arrow-right {
					width: 20rpx;
					height: 30rpx;
				}
			}

		}
	}

	.yuangong-item {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
		box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.9);
		border-radius: 14rpx;
		padding: 40rpx 30rpx 40rpx 30rpx;

		.biaoshi {
			width: 40rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.u-content-more {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			font-weight: 400;
			color: #666666;

			.more-title {
				margin-top: -7rpx;
			}

			.u-icon {
				margin-left: 8rpx;
			}
		}

	}

	.baobiao-item {
		background: linear-gradient(180deg, #F1F6FF 0%, rgba(255, 255, 255, 0.9) 100%);
		box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);

		.time-day {
			width: 100rpx;
			background: #2A6CFF;
			color: #fff;
			padding: 6rpx 8rpx;
		}

		.time-month {
			width: 100rpx;
			background: #fff;
			box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);
			border-radius: 10rpx;
			color: #1989fa;
			padding: 6rpx 8rpx;
		}
	}

	.lenged {
		position: absolute;
		top: 16rpx;
		right: 20rpx;
		width: 36vw;
		padding: 10rpx 18rpx;

		.wancheng {
			width: 100%;

			.timu {
				color: #999;
			}
		}
	}

	::v-deep .u-drawer {
		z-index: 9999 !important;
	}

	.u-content {
		border-radius: 20rpx;
		padding: 40rpx 30rpx 40rpx 30rpx;
		font-size: 24rpx;
		color: #333;
		z-index: 3;
		position: relative;

		.monthIncome-box {
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			right: 0rpx;
			top: 0rpx;

			.income-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.monthIncome {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				color: #ffffff;

				.label {
					font-size: 20rpx;
					margin-bottom: 10rpx;
				}

				.value {
					font-size: 32rpx;
				}

			}
		}

		.u-content-num {
			font-weight: bold;
			font-size: 44rpx;
			display: flex;
			justify-content: flex-start;

			.icon-eye {
				margin-left: 18rpx;
			}

		}

		.u-content-tishi {
			color: #FE4F04;
			margin-top: 20rpx;
		}

		.u-content-nav {
			background: #fef4ed;
			margin-top: 30rpx;
			padding: 30rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			-webkit-border-radius: 20rpx;
			-moz-border-radius: 20rpx;
			border-radius: 20rpx;

			.u-content-nav-title {
				font-weight: 400;
				font-size: 24rpx;
				color: #782400;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				padding-bottom: 10rpx;
			}

			.u-content-nav-money {
				font-weight: 500;
				font-size: 32rpx;
				color: #FE4F04;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.u-content-time {
			text-align: center;
			overflow: hidden;
			margin-right: 24rpx;

			.avtar-url {
				/* 其他样式 */
				width: 140rpx;
				height: 140rpx;
				background: #faf1ed;
				border-radius: 50%;
				border: 1rpx solid #faf1ed;
				display: flex;
				font-weight: 700;
				justify-content: center;
				align-items: center;
			}

		}

	}

	.u-content-grid {
		padding: 32rpx 0 2rpx;
		background: #fff;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(203, 253, 53, 0.05);
		border-radius: 16rpx;
		border: 2rpx solid #FFFFFF;
		margin-top: 20rpx;
		z-index: 2;
		position: relative;

		.swiper {
			height: 210rpx;
		}

		.u-content-grid-img {
			width: 86rpx;
			height: 113rpx;
			padding-bottom: 16rpx;
		}

		.grid-text {
			font-size: 24rpx;
			color: #434343;
			padding: 0rpx 0 38rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}
	}

	.pay-item {
		width: 25%;
	}

	.top-yuangong {
		position: relative;

		.top-yuangong-item {
			width: 25%;
		}

		.top-icon {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 24%;
			left: -2%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.topnum {
			font-size: 30rpx;
			color: #333;
		}

		.topname {
			font-size: 24rpx;
			margin-top: 14rpx;
			color: #999;
		}

		.tool-icon {
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>